/*
 * @Author: your name
 * @Date: 2020-10-14 15:24:16
 * @LastEditTime: 2022-03-06 23:51:50
 * @LastEditors: 晟松
 * @Description: In User Settings Edit
 * @FilePath: \volunteer-vue3-admin\vue.config.js
 */
const config = require("./src/config");
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
let scssVariables = require("./src/styles/variables.scss.js");

module.exports = {
    publicPath: "",
    // 下面是关掉eslint的检查
    lintOnSave: false,

    // productionSourceMap: false,

    productionSourceMap: true,
    // devServer里面包含所有webpack-dev-server的选项
    // 里面的before属性就是在运行vue之前干一些什么事，这里就是先运行一下mock_server。
    // mock在vue里模拟数据的用法：https://www.jianshu.com/p/c4883c04acb3
    devServer: {
        before: (app) => {
            // console.warn("env:", process.env);
            if (config.dev_mock) {
                const mock_server = require("./src/api/mock-server.js");
                // console.warn("run 运行了");
                mock_server(app);
            }
        },
        // 修改读开发端口
        port: 9000,
    },
    // 在webpack打包的过程中进行一下链式操作，这里似乎是对一些插件进行一下添加？
    chainWebpack: (config) => {
        config.plugin("provide").use(webpack.ProvidePlugin, [
            {
                XE: "xe-utils",
            },
        ]);
        config.plugin("define").use(webpack.DefinePlugin, [
            {
                VE_ENV: {
                    MODE: JSON.stringify(process.env.NODE_ENV),
                },
            },
        ]);
        config.plugins.delete("prefetch");
        // config.plugins.delete("preload");
        // config.optimization.delete("splitChunks");
    },
    // 会合并到最终的webpack配置
    configureWebpack: () => {
        let baseConfig = {};
        let envConfig = {};
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            envConfig = {
                optimization: {
                    splitChunks: {
                        chunks: "all",
                        // enforceSizeThreshold: 20000,
                        cacheGroups: {
                            echarts: {
                                name: "chunk-echarts",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?echarts(.*)/,
                            },
                            elementPlus: {
                                name: "chunk-elementPlus",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
                            },
                            elementPlusIcon: {
                                name: "chunk-elementPlusIcon",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?@element-plus[\\/]icons(.*)/,
                            },
                            mockjs: {
                                name: "chunk-mockjs",
                                priority: 20,
                                test: /[\\/]node_modules[\\/]_?mockjs(.*)/,
                            },
                        },
                    },
                },
                externals: {
                    // lodash: "_"
                },
                plugins: [
                    new UglifyJsPlugin({
                        uglifyOptions: {
                            output: {
                                comments: false, // 去掉注释
                            },
                            warnings: false,
                            compress: {
                                drop_console: true,
                                // pure_funcs: ["console.log"] //移除console
                            },
                        },
                    }),
                    new CompressionWebpackPlugin({
                        filename: "[path].gz[query]",
                        algorithm: "gzip",
                        // test: /\.js$|\.html$|\.json$|\.css/,
                        test: /\.js$|\.json$|\.css/,
                        threshold: 10240, // 只有大小大于该值的资源会被处理
                        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                        // deleteOriginalAssets: true // 删除原文件
                    }),
                ],
            };
        }
        return Object.assign(baseConfig, envConfig);
    },
    // 对scss的变量名处理一下,并字符串化，能够让其他文件访问(这里就是styles/common.scss里面了)
    css: {
        loaderOptions: {
            scss: {
                // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
                // additionalData: `@import "~@/styles/imports.scss";`
                additionalData: Object.keys(scssVariables)
                    .map((k) => `$${k.replace("_", "-")}: ${scssVariables[k]};`)
                    .join("\n"),
            },
        },
    },
};
